<template>
  <div class="rolelist">
    <!-- 面包蟹 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <el-button @click="addgrantdialogFormVisible=true" type="success">添加角色</el-button>

    <!-- 表格 -->
    <el-table :data="rolelist" style="width: 100%;margin-top:15px" border>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- 展示区域 -->
            <!-- 第一层 -->
            <el-row v-for="first in scope.row.children" :key="first.id" style="margin-top:10px">
              <el-col :span="4">
                <el-tag
                  closable
                  @close="delrightbyrole(scope.row,first.id)"
                  type="success"
                >{{first.authName}}</el-tag>
              </el-col>
              <el-col :span="20">
                <el-row v-for="second in first.children" :key="second.id" style="margin-top:10px">
                  <el-col :span="4">
                    <el-tag
                      @close="delrightbyrole(scope.row,second.id)"
                      type="warning"
                    >{{second.authName}}</el-tag>
                  </el-col>
                  <el-col :span="20">
                    <el-tag
                      @close="delrightbyrole(scope.row,third.id)"
                      v-for="third in second.children"
                      :key="third.id"
                      closable
                      type="warning"
                      style="margin-left:10px"
                    >{{third.authName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>

      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" ref="changeList">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button type="primary" icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="角色分配" placement="top">
            <el-button @click="showRolelist(scope.row)" type="primary" icon="el-icon-share"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button @click="deletRoleList(scope.row)" type="primary" icon="el-icon-delete"></el-button>
          </el-tooltip>

          <el-dialog title="授权角色" :visible.sync="grantdialogFormVisible">
            <el-tree
              ref="mytree"
              :data="data4"
              :props="defaultProps"
              show-checkbox
              node-key="id"
              :default-expand-all="true"
              :default-checked-keys="checkAll"
            ></el-tree>
            <div slot="footer" class="dialog-footer">
              <el-button @click="grantdialogFormVisible = false" style="margin-left:200px">取 消</el-button>
              <el-button @click="getRightRole" type="primary" style="margin-left:100px">确 定</el-button>
            </div>
          </el-dialog>
         
        </template>
      </el-table-column>
    </el-table>
     <!-- 添加角色 -->
          <el-dialog title="添加角色" :visible.sync="addgrantdialogFormVisible">
            <el-form :model="addForm"  label-width="80px">
              <el-form-item label="角色名称">
                <el-input v-model="addForm.roleName"  auto-complete="off" ></el-input>
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="addForm.roleDesc"  auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <el-button @click='addgrantdialogFormVisible=false' style="margin-left:200px">取 消</el-button>
            <el-button @click="addrole"  type="primary" style="margin-left:100px">确 定</el-button>
          </el-dialog>
  </div>
</template>
// <script>
import { getAllRightList } from "../../api/rights.js";
import {
  getAllRoleLlist,
  deletRole,
  changeRole,
  delRightByrole,
  grantRightByRole,
  addRoles
} from "../../api/roul-api.js";
export default {
  data() {
    return {
      addForm: { roleName: "", roleDesc: "" },
      addgrantdialogFormVisible: false,

      roleId: "",
      checkAll: [],
      grantdialogFormVisible: false,
      data4: [],
      defaultProps: {
        children: "children",
        label: "authName"
      },
      rolelist: [],

      changeList: [
        {
          id: "",
          roleDesc: "",
          roleName: ""
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  // 列表展示
  methods: {
    init() {
      getAllRoleLlist().then(res => {
        // console.log(res);
        this.rolelist = res.data.data;
      });
    },

    showRolelist(row) {
      // console.log(row);
      this.grantdialogFormVisible = true;
      this.roleId = row.id;
      getAllRightList("tree").then(res => {
        // console.log(res);
        if (res.data.meta.status === 200) {
          this.data4 = res.data.data;
          //列表有了,接下来就是给一个数组实现默认展开需要的三级ID数据
          this.checkAll.length = 0;
          //每次进循环之前要进行清空
          row.children.forEach(first => {
            if (first.children && first.children.length > 0) {
              first.children.forEach(second => {
                if (second.children && second.children.length > 0) {
                  second.children.forEach(third => {
                    this.checkAll.push(third.id);
                    // console.log(third.id)
                  });
                }
              });
            }
          });
        }
      });
    },
    getRightRole() {
      var arr = this.$refs.mytree.getCheckedNodes();
      console.log(arr);
      var temp = [];
      //  遍历这个数组
      for (var i = 0; i < arr.length; i++) {
        temp.push(arr[i].id + "," + arr[i].pid);
        console.log(temp);
        var str = temp.join(",");
        console.log(str);
        // 去重,只有数组可以去重
        var arr2 = str.split(",");
        console.log(arr2);
        var finalArr = [...new Set(arr2)];
        console.log(finalArr);
        grantRightByRole(this.roleId, finalArr.join(",")).then(res => {
          console.log(res);
          if (res.data.meta.status === 200) {
            this.$message({
              type: "success",
              message: res.data.meta.msg
            });
            this.init();
            this.grantdialogFormVisible = false;
          }
        });
      }
    },

    deletRoleList(row) {
      // console.log(row)
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(123);
          var id = row.id;
          // console.log(id)
          deletRole(id).then(res => {
            console.log(res);
            if (res.data.meta.status === 200) {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.init();
            }
          });
        })
        .catch(() => {
          console.log(213);
        });
    },

    delrightbyrole(row, rightId) {
      console.log(row, rightId);

      delRightByrole(row.id, rightId).then(res => {
        // console.log(res)
        if (res.data.status === 200) {
          this.$message({
            type: "success",
            message: res.data.meta.msg
          });
          //重置当前数据源的数组
          row.children = res.data.data;
        }
      });
    },
    addrole() {
      // this.addgrantdialogFormVisible = true;
      console.log(this.addForm)
      addRoles(this.addForm).then(res => {
        console.log(res);
        if(res.data.meta.status===201)
        this.$message({
              type:'success',
              message:res.data.meta.msg
        })
        this.addForm=res.data.data
        this.addgrantdialogFormVisible = false
        this.init()
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>
